<template>
	<view class="comAll" v-if="modelVisible" @click="cancel">
		<view class="content" @click.stop>
			<view class="tip">
				<view class="tipTitle">
					<text>请输入{{type === 1?'拒绝':'取消'}}原因</text>
				</view>
				<view class="tipInput">
					<input type="text" v-model="result" placeholder="例如: 天气原因无法发货" placeholder-style="color:#d6afaf;"/>
				</view>
				<view class="tipButton">
					<button @click="submit" hover-class="subActive">
						完  成
					</button>
				</view>
			</view>
			<view class="bottomBtn">
				<button @click="cancel" hover-class="subActive">
					<view class="btnIcon"></view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			modelVisible:Boolean,
			type:Number,
		},
		data() {
			return {
				result:'',
			}
		},
		methods:{
			submit() {
				this.$emit('submitRufuse', {result:this.result, type:this.type})
				uni.showTabBar({
					
				})
			},
			cancel() {
				this.$emit('cancelRufuse')
				uni.showTabBar({
					
				})
			},
		}
	}
</script>

<style scoped>
	.comAll{
		position: fixed;
		height:100%;
		padding: 17upx;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.65);
		display: flex;
		z-index: 100;
	}
	/* 背景虚化  */
	.comAll:after{
		filter: blur(20px);
		-webkit-filter: blur(20px);  /* Chrome, Safari, Opera */
	}
	.content{
		margin: auto 0;
		width:100%;
	}
	.tip{
		height: 289.33upx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 17upx;
		border-radius: 10upx;
		background-color: #fdf5f3;
	}
	.tipTitle{
		font-size:36upx;
		color:#333333;
		font-weight: bold;
		text-align: center;
		letter-spacing: 15upx;
		padding: 20upx 0;
	}
	.tipInput{
		font-size: 24upx;
		display: flex;
		padding: 20upx 0;
	}
	.tipInput input{
		color:#d6afaf;
		background-color: #FFF;
		width:357.33upx;
		height: 66.66upx;
		border-radius: 10upx;
		margin: 0 auto;
		padding: 0 10upx;
	}
	.plaClass{
		color:#d6afaf !important;
		font-size: 24upx;
	}
	.tipButton{
		padding: 20upx 0;
	}
	.tipButton button{
		width:138.66upx;
		height:53.33upx;
		border-radius: 10upx;
		background-color: #f7533e;
		color:#FFF;
		line-height: 53.33upx;
		padding: 0;
		text-align: center;
	}
	.tipButton button:after{
		border:none;
	}
	.bottomBtn {
		margin-top: 40upx;
	}
	.bottomBtn button{
		width:49.33upx;
		height:55upx;
		background-color: #FFF;
	}
	.btnIcon:before,
	.btnIcon:after {
		content: "";
		position: absolute;
		background: #ca4837;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	.btnIcon:before {
		width: 55upx;
		height: 7upx;
		border-radius: 10upx;
	}
	
	.btnIcon:after {
		width: 7upx;
		height: 55upx;
		border-radius: 10upx;
	}
	.subActive{
		background-color: #FFC8C7 !important;
	}
</style>
